<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
		  <el-select v-model="value" placeholder="请选择">
		    <el-option-group
		      v-for="group in options"
		      :key="group.label"
		      :label="group.label">
		      <el-option
		        v-for="item in group.options"
		        :key="item.value"
		        :label="item.label"
		        :value="item.value">
		      </el-option>
		    </el-option-group>
		  </el-select>
		</div>
		
		<script>
		 new Vue({
		 			  el:"#app",
		 			  data:{
		        options: [{
		          label: '热门城市',
		          options: [{
		            value: 'Shanghai',
		            label: '上海'
		          }, {
		            value: 'Beijing',
		            label: '北京'
		          }]
		        }, {
		          label: '城市名',
		          options: [{
		            value: 'Chengdu',
		            label: '成都'
		          }, {
		            value: 'Shenzhen',
		            label: '深圳'
		          }, {
		            value: 'Guangzhou',
		            label: '广州'
		          }, {
		            value: 'Dalian',
		            label: '大连'
		          }]
		        }],
		        value: ''
		      }
		    
		  })
		</script>
	</body>
</html>
